<template>
  <div class="login-wrapper">
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="65px" class="demo-ruleForm">
      <el-form-item label="用户名" prop="name">
        <el-input class="w240" v-model="ruleForm.name" placeholder="请输入用户名"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input class="w240" type="password" placeholder="请输入密码" v-model="ruleForm.password"></el-input>
      </el-form-item>
      <el-form-item v-if="showReg" label="头像" prop="avatar">
        <div class="avatar-select">
          <div class="block" @click="setAvatar(idx)" v-for="(item, idx) in avatarList" :key="idx">
            <el-avatar size="medium" :src="item"></el-avatar>
            <i class="check el-icon-check" v-show="idx == currentAvatar"></i>
          </div>
        </div>
      </el-form-item>
    </el-form>
    <div class="btn-wrapper">
      <el-button type="primary" v-if="!showReg" @click="submitForm('ruleForm', 'login')">登录</el-button>
      <el-button type="text" @click="showRegister" v-if="!showReg">去注册</el-button>
      <el-button v-if="showReg" type="primary" @click="submitForm('ruleForm', 'register')">注册</el-button>
      <el-button type="text" @click="showRegister" v-if="showReg">去登录</el-button>
    </div>
  </div>
</template>
<script>
import { CommonEnum } from '@/enums'
export default {
  data() {
    return {
      showReg: false,
      currentAvatar: 0,
      avatarList: CommonEnum.AVATAR,
      avatar: CommonEnum.AVATAR[0],
      ruleForm: {
        name: '',
        password: '',
        avatar: ''
      },
      rules: {
        name: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
        password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
      }
    }
  },
  methods: {
    setAvatar(idx) {
      this.currentAvatar = idx
      this.avatar = this.avatarList[idx]
    },
    showRegister() {
      this.showReg = !this.showReg
      this.resetForm('ruleForm')
    },
    async login() {
      const res = await this.$store.dispatch('_postLogin', { username: this.ruleForm.name, password: this.ruleForm.password })
      if (res.status == 200) {
        this.$message.success('登录成功')
      }
    },
    async register() {
      const res = await this.$store.dispatch('_postRegister', { username: this.ruleForm.name, password: this.ruleForm.password, avatar: this.avatar })
      if (res.status == 200) {
        this.$message.success('注册成功，已自动登录')
      }
    },
    submitForm(formName, methods) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this[methods]()
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    }
  }
}
</script>
<style lang="scss" >
.login-wrapper {
  padding: 20px;
  .el-form-item__error {
    left: 8px;
  }
  .avatar-select {
    // border: 1px solid #dcdfe6;
    // border-radius: 4px;
    // background: #fff;
    margin-left: 9px;
    width: 240px;
    display: flex;
    flex-wrap: wrap;
    .block {
      padding: 4px;
      position: relative;
      cursor: pointer;
      .check {
        position: absolute;
        left: 4px;
        top: 4px;
        color: #13f513;
        display: block;
        background: rgba(0, 0, 0, 0.5);
        width: 36px;
        height: 36px;
        border-radius: 50%;
        line-height: 36px;
        font-weight: 600;
      }
    }
  }
}
</style>